<template>
  <el-dialog title="添加菜单"
             :visible="true"
             append-to-body
             fullscreen
             :before-close="handleClose">
    <el-main class="menu">
      <!-- 左边栏 -->
      <!-- <el-aside width="250px"
              style="margin-right:20px">
      <el-card class="box-card">
        <div slot="header">
          <span>菜单树</span>
        </div>
        <el-tree :data="treeItem"
                 :props="treeProps"
                 node-key="menuId"
                 :highlight-current="true"
                 :default-expanded-keys="expandedId"
                 @node-click="treeClick"></el-tree>
      </el-card>
    </el-aside> -->
      <div style="width:100%">
        <!-- 顶栏容器 -->
        <!-- 查询框 -->
        <el-form class="my-search-form-box"
                 :model="searchItem"
                 @submit.native.prevent
                 inline>
          <div class="my-search-form-left">
            <el-form-item label=" 菜单名称：">
              <el-input v-model="searchItem.deptName"
                        size="small"
                        placeholder="请输入菜单名称"
                        @change="doSearch"
                        style="width: 160px;"></el-input>
            </el-form-item>
          </div>
          <div class="my-search-form-right">
            <el-button type="primary"
                       size="small"
                       @click="doSearch">搜索
            </el-button>
            <el-button type="primary"
                       size="small"
                       @click="doAdd">新增
            </el-button>
          </div>
        </el-form>

        <!-- <div class="search-box">
        <div class="conditions-box">
          <div class="conditions-item">
            菜单名称:
            <el-input v-model="searchItem.menuName"
                      size="small"
                      placeholder="请输入菜单名称"
                      @change="doSearch"
                      style="width: 160px;"></el-input>
          </div>
        </div>
        <div class="search-btn">
          <el-button type="primary"
                     size="small"
                     @click="doSearch">搜索
          </el-button>
          <el-button type="primary"
                     size="small"
                     @click="doAdd">新增
          </el-button>
        </div>
      </div> -->
        <!-- 主要区域容器 -->
        <div class="my-table-pagination">
          <el-table :data="tableItem.records"
                    stripe
                    class="my-table"
                    size="medium"
                    :height="tableHeight"
                    @selection-change="handleSelectionChange"
                    :v-loading="tableLoading">
            <el-table-column type="selection"
                             align="center"
                             width="55">
            </el-table-column>
            <el-table-column prop="menuOrder"
                             label="显示顺序"
                             align="center"
                             width="100"></el-table-column>
            <el-table-column prop="name"
                             label="菜单名称"
                             align="center"></el-table-column>
            <el-table-column prop="path"
                             label="地址"
                             align="center"
                             width="150"></el-table-column>
            <el-table-column prop="lasttime"
                             label="维护时间"
                             align="center"
                             width="150"
                             :formatter="(row, column) => $moment(row.firsttime).format('YYYY年MM月DD日')"></el-table-column>
            <el-table-column prop="state"
                             label="当前状态"
                             align="center"
                             width="120">
              <template slot-scope="{row,index}">
                <span v-if="row.state==='停用'"
                      style="color: #F04134">{{row.state}}
                </span>
                <span v-else
                      style="color: #67C23A">{{row.state}}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="operations"
                             label="操作"
                             align="center"
                             width="180">
              <template slot-scope="{row,index}">
                <el-button v-if="row.state==='停用'"
                           type="text"
                           size="medium"
                           @click="doEnable(row)">
                  启用
                </el-button>
                <el-button v-else
                           type="text"
                           size="medium"
                           @click="doDisable(row)">停用
                </el-button>
                <el-button type="text"
                           size="medium"
                           @click="doUpdate(row)">修改
                </el-button>
                <el-button type="text"
                           size="medium"
                           @click="doDelete(row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="sizeChange"
                         @current-change="currentChange"
                         style="float: right;"
                         :current-page="tableItem.current"
                         :page-count="tableItem.pages"
                         :total="tableItem.total"
                         :page-sizes="[20, 50, 100]"
                         layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>

      <!-- 新增对话框 -->
      <el-dialog :title="editTitle"
                 :visible.sync="showEditDialog"
                 width="1050px">
        <menu-edit v-if="showEditDialog"
                   v-bind:editItem="editItem"
                   v-bind:disabled="editDisabled"
                   v-on:closeDialog="closeDialog()">
        </menu-edit>
      </el-dialog>
    </el-main>

  </el-dialog>
</template>

<script>
  export default {
    name: '',

    components: {},
    data () {
      return {
        // 菜单树
        treeItem: [],
        treeProps: {
          children: 'childs',
          label: 'name'
        },
        expandedId: [],
        // 查询
        searchItem: {
          menuPid: ''
        },
        // 表格
        tableHeight: -1,
        tableItem: {
          size: 20
        },
        tableLoading: false,
        // 编辑
        editItem: {
          menuId: '',
          menuPid: '',
          menuPname: ''
        },
        editTitle: '',
        editDisabled: false,
        showEditDialog: false
      }
    },
    methods: {
      // 获取菜单树
      async handleClose () {
        await this.$emit('update:visible', false)
        // console.log(this.$parent.$parent)

        await this.$parent.$parent.getUserList()
        await this.$parent.$parent.getMenuList()
      },
      handleSelectionChange (val) {

      },
      getTree () {
        this.$axios.get(this.$api.menu.getTree + '/' + '0').then((rs) => {
          if (rs) {
            this.treeItem = rs
            if (rs[0]) {
              this.searchItem.menuPid = rs[0].menuId
              this.editItem.menuPid = rs[0].menuId.toString()
              this.editItem.menuPname = rs[0].name.toString()
              this.expandedId[0] = rs[0].menuId
              this.doSearch()
            }
          }
        })
      },
      // 树节点点击事件
      treeClick (data) {
        this.searchItem.menuPid = data.menuId
        this.editItem.menuPid = data.menuId
        this.editItem.menuPname = data.name
        this.doSearch()
      },
      // 查询
      doSearch () {
        this.getPage()
      },
      // 获取分页列表
      getPage () {
        this.tableLoading = true
        this.tableItem.params = this.searchItem
        this.$axios.post(this.$api.menu.getPage, this.tableItem).then((rs) => {
          if (rs) {
            this.tableItem = rs
            this.tableLoading = false
          }
        })
      },
      // 分页
      sizeChange: function (size) {
        this.tableItem.size = size
        this.doSearch()
      },
      // 分页
      currentChange: function (current) {
        this.tableItem.current = current
        this.doSearch()
      },
      // 新增
      doAdd () {
        this.editTitle = '新增菜单'
        this.editItem.menuId = ''
        this.showEditDialog = true
      },
      // 修改
      doUpdate (row) {
        this.editTitle = '修改菜单'
        this.editItem.menuId = row.menuId
        this.showEditDialog = true
      },
      // 关闭窗口
      closeDialog () {
        this.showEditDialog = false
        this.getTree()
      },
      // 启用
      doEnable (row) {
        this.$confirm('此操作会对该单位进行启用操作，是否继续?', '提示', {
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          this.$axios.get(this.$api.menu.doEnable + '/' + row.menuId).then((rs) => {
            if (rs) {
              this.$message({
                message: '操作成功!',
                showClose: true,
                type: 'success',
                closeOnClickModal: false
              })
              this.doSearch()
            }
          })
        }).catch(() => {
        })
      },
      // 停用
      doDisable (row) {
        this.$confirm('此操作会对该单位进行停用操作，是否继续?', '提示', {
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          this.$axios.get(this.$api.menu.doDisable + '/' + row.menuId).then((rs) => {
            if (rs) {
              this.$message({ message: '操作成功!', showClose: true, type: 'success' })
              this.doSearch()
            }
          })
        }).catch(() => {
        })
      },
      // 删除
      doDelete (row) {
        this.$confirm('此操作会对该单位进行删除操作，是否继续?', '提示', {
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          this.$axios.get(this.$api.menu.doDelete + '/' + row.menuId).then((rs) => {
            if (rs) {
              this.$message({
                message: '操作成功!',
                showClose: true,
                type: 'success',
                closeOnClickModal: false
              })
              this.doSearch()
            }
          })
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .menu {
    display: flex;
    overflow: auto;
    .el-aside {
      .el-main {
        padding: 20px 0 10px 20px;

        .el-card__header {
          background-color: #e5f1fb;
          border-left: 2px solid #2387e2;
        }

        .el-card__body {
          padding: 0;
          overflow: auto;
          height: -moz-calc(100vh - 190px);
          height: -webkit-calc(100vh - 190px);
          height: calc(100vh - 190px);
        }
      }
    }

    .el-tree {
      .is-current > .el-tree-node__content:nth-of-type(1) {
        color: #2387e2;
      }

      .is-current > .el-tree-node__content .el-tree-node__expand-icon {
        color: #2387e2;
      }
    }

    .el-table {
      height: calc(100vh - 270px);
    }
  }
</style>
